<template>
<div>
    <h2>注册页面</h2>
    <button @click="TakeLogin">跳转到登录</button>
    <br>
    <RouterLink to="/Login">登录</RouterLink>

    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info">
                <td>{{ item.Sid }}</td>
                <td>{{ item.Sname }}</td>
                <td>{{ item.Sage }}</td>
                <td><a href="#" @click="TakeEdit(item.Sid)">修改</a></td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'

//useRouter()函数
//创建路由操作对象实例 useRouter:路由操作对象
const router=useRouter();

//创建跳转方法
const TakeLogin=()=>{
    //1.方式1:可以实现页面跳转功能 但是会完成当前页面的刷新操作
    //location.href='/Login';

    //2.方式2:通过路由操作对象完成页面跳转
    // router.push('/Login');
    //返回到默认地址
    // router.push('/');

    //3.方式3:通过路由标签完成页面跳转 RouterLink
}

const info=[
    {
        Sid:1,
        Sname:"张三",
        Sage:18
    },
    {
        Sid:2,
        Sname:"李四",
        Sage:19
    },
    {
        Sid:3,
        Sname:"王五",
        Sage:20
    },
]

const TakeEdit=(Sid:number)=>{
    router.push({
        //方式一:通过路由地址完成参数传递并跳转 path:地址 query:参数
        // path:"/EditDemo",
        // query:{
        //     Sid:Sid
        // }

        //方式二:通过路由名称完成参数传递并跳转 name:名称 params:参数
        name:"EditDemo",
        params:{
            Sid:Sid
        }
    }) 
}
</script>